<template>
	<view class="flex-col page">

		<view class="flex-col group mt-9">
			<view class="flex-row justify-between items-center section">
				<view class="flex-row items-center">
					<image class="image_2" src='../../static/icons/location.png' />
					<view class="flex-col items-start ml-17">
						<text class="font text">{{orders.receiverName}},{{orders.receiverPhone}}</text>
						<text class="font_2 text_2 mt-9">{{orders.receiverDistrict}}{{orders.receiverAddress}}</text>
					</view>
				</view>

				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="flex-row items-center section_2 mt-7" @click="goGoods(orders.productId)">
				<image class="image_4" :src="orders.productMeta.imageUrl" />
				<view class="flex-col items-start flex-1 ml-17">
					<text class="font_2 text_3">{{orders.productName}}</text>
					<view class="flex-row" style="padding-top: 20rpx; padding-left: 20rpx;">
						<u-avatar size="20" :src="orders.buyer.meta.avatar"></u-avatar>
						<view style="font-size: 28rpx; color:#888;">
							{{orders.buyer.nickname}}{{orders.buyer.mobile}}
						</view>
					</view>
					<!-- 				<view class="flex-row">
						<text class="font text_5">{{orders.unitPrice?orders.unitPrice.toFixed(2):'0.00'}}</text> <text
							style="padding: 5rpx;">x{{orders.quantity}}</text>
					</view> -->

				</view>
			</view>
			<view class="flex-col section_3 mt-7">
				<view class="flex-row justify-between items-center">
					<view class="flex-row justify-between items-center" @click="copy(orders.id)">
						<text class="font_2 text_6">单号：{{orders.id}} </text><u-icon name="/static/icons/copy.png"
							size="20"></u-icon>
					</view>

					<text class="text_7" v-if="isCustomer">{{getOrderStatus(orders.status)}}</text>
					<text class="text_7" v-else>{{getOrderStatus(orders.status)}}</text>
				</view>
				<view class="flex-col group_2">
					<view class="flex-row justify-between items-center ">
						<text class="font_2 text_8">购买数量</text>
						<text class="font_2 text_9">{{orders.quantity}}</text>
					</view>
					<view class="flex-row justify-between  mt-19">
						<text class="font_2 text_8">商品总额</text>
						<text class="font_2 text_9">￥{{orders.totalPrice?orders.totalPrice.toFixed(2):'0.00'}}</text>
					</view>
					<view class="flex-row justify-between mt-19" v-if="orders.deliveryVendorName">
						<text class="font_2">物流公司</text>
						<text class="font_2 text_10">{{orders.deliveryVendorName}}</text>
					</view>
					<view class="flex-row justify-between mt-19" v-if="orders.deliveryNo">
						<text class="font_2">物流单号</text>
						<view class="flex-row items-center" @click="copy(orders.deliveryNo)">
							<text class="font_2 text_10">{{orders.deliveryNo}}</text> <u-icon
								name="/static/icons/copy.png" size="20"></u-icon>
						</view>

					</view>

					<view class="flex-row justify-between mt-19">
						<text class="font_2">下单时间</text>
						<text class="font_2 text_10">{{fotmatDate(orders.createdAt)}}</text>
					</view>
					<view class="flex-row justify-between mt-19 items-center">
						<text class="font_2">订单备注</text>
						<text class="font_2 text_10" style="max-width:500rpx ;">
							{{orders.remark||'未填写订单备注'}}
						</text>
					</view>
				</view>
				<view style="font-size: 28rpx; margin-top: 20px; background-color: #f6f6f6;" v-if="orders.instruction">
					<!-- 			<view style="padding: 10rpx; text-align: left;font-size: 34rpx; color: #ff0101; font-weight: bold;">
						货款缴纳方式:
					</view> -->
					<view
						style="padding: 20rpx; text-align: left; font-size: 28rpx; color: #ff0101; font-weight: bold;">

						<text
							style="padding: 10rpx; text-align: left; font-size: 32rpx; color: #000; font-weight: bold;">{{orders.instruction}}</text>
				 

						<view style="padding: 20rpx; padding-top: 40rpx; text-align: center; color: #ff0101;">
							<text
								style="padding: 20rpx 0; text-align: left; font-size: 28rpx; color: #000; font-weight: bold;">付款方式:截屏分享至微信【文件传输助手】或任一微信对话框，识别收款二维码付款</text>

						</view>
						<!-- 
						<view v-if="orders.instructionUser" style="color:#000;padding-top:10rpx;padding-left: 10rpx">
							联系方式:{{orders.instructionUser.nickname}}-{{orders.instructionUser.mobile}}
						</view> -->
					</view>
					<!-- 			<view style=" padding-left: 20rpx; font-size: 28rpx; color: #ff0101; font-weight: bold;">
						2 保存店铺收款二维码到相册，微信扫一扫付款
					</view>
					<view v-if="orders.instructionUser.meta.paymentText"
						style="color:#000;padding: 10px; font-size: 28rpx; color: #ff0101; font-weight: bold;">
						3 银行转账:
						<view style="padding: 20rpx 0; color: #000; font-size: 28rpx;font-weight: bold"
							@click="copyText(orders.instructionUser.meta.paymentText)" class="flex-row">
							{{orders.instructionUser.meta.paymentText}} <u-icon name="file-text" label="复制"></u-icon>
						</view>
					</view> -->
					<view style="padding: 20rpx 90rpx" v-if="orders.instructionUser">
						<image v-if="orders.instructionUser.meta.qrCode" :src="orders.instructionUser.meta.qrCode"
							style="width: 100%;" mode="widthFix" :show-menu-by-longpres="true"></image>

					</view>
					<!-- 			<view style="text-align: center; padding: 10rpx; margin-top: 20rpx; font-size: 28 ;">
						提示:长按二维码图片保存到相册后进行识别
						<button type="primary"
							style="width: 200px; line-height:unset; margin:5px auto; font-size:14px;padding: 10px; background-color: #;"
							@click="save(orders.instructionUser.meta.qrCode)">保存到相册</button>
					</view> -->

				</view>

				<view class="flex-row justify-center group_4">
					<button size="mini" type="primary" class="orderbtn flex-1" v-for="(a,index) in orders.actions"
						@click="doAction(a,orders)">
						{{getOrderBtn(a)}}
					</button>

				</view>
			</view>
		</view>
		<u-toast ref="utoast"></u-toast>
	</view>
</template>

<script>
	import Utils from '../../common/Utils';
	export default {
		components: {},
		props: {},
		data() {
			return {
				orders: {},
				isCustomer: false,
			};
		},
		onLoad(options) {
			if (options.orderId) {
				this.getOrderDetails(options.orderId)
				let token = this.$store.state.userToken;
				if (token) {
					console.log(this.myRoles)
					if (userinfo.highestRole == 'AG_CSR' || userinfo.highestRole == 'AU_CSR') {

						this.isCustomer = true
					} else {
						this.isCustomer = false;

					}
				}
			}
		},
		methods: {
			copyText(text) {
				uni.setClipboardData({
					data: text,
					complete() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
			goPay(url) {

			},
			save(url) {
				uni.downloadFile({
					url: url, // 图片的网络URL地址
					success: (downloadResult) => {
						if (downloadResult.statusCode === 200) {
							const tempFilePath = downloadResult.tempFilePath; // 下载后的临时文件路径
							uni.saveImageToPhotosAlbum({
								filePath: tempFilePath,
								success() {
									uni.showToast({
										title: '保存成功',
										icon: 'success',
										duration: 2000
									});
								},
								fail(err) {
									console.error('保存失败:', err);
									uni.showToast({
										title: '保存失败',
										icon: 'none',
										duration: 2000
									});
								}
							});
						} else {
							console.error('下载失败:', downloadResult.errMsg);
						}
					},
					fail(err) {
						console.error('下载失败:', err);
					}
				});
			},
			goGoods(id) {
				uni.navigateTo({
					url: '/pages-publics/GoodsDetails/GoodsDetails?id=' + id
				})
			},
			copy(data) {
				uni.setClipboardData({
					data,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				})
			},
			fotmatDate(date) {
				return Utils.formatDate(date, 'yyyy-MM-dd HH:mm:ss')
			},
			doAction(action, order) {
				let _that = this;
				if (action == "REFUND") {
					uni.navigateTo({
						url: `/pages-aftersales/Apply/Apply?orderId=${order.id}`
					})
				} else {
					uni.showModal({
						content: `确定要${Utils.getOrderBtn(action)}【${order.id}】`,
						complete(res) {
							if (res.confirm) {
								_that.$Utils.doOrderAction(order.id, action).then(res => {
									console.log('action', action)
									_that.reLoad();
								})
							}

						}
					})
				}
			},

			goBack() {
				uni.navigateBack()
			},
			getOrderBtn(action) {
				return Utils.getOrderBtn(action);
			},
			getOrderStatus(status) {
				return Utils.getOrderStatus(status);
			},
			getOrderStatus2(status) {
				return Utils.getOrderStatus2(status);
			},
			getOrderDetails(id) {
				this.$get({
					url: `${this.$Utils.ApiUrl}/orders/${id}`,
					data: {

					}
				}).then(res => {
					console.log(res)
					this.orders = res;

				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.group_4 button {
		border-radius: 30rpx;
		padding: 0 30rpx;
		font-size: 32rpx;
		margin: 0 20rpx;
	}

	.group_4 button:nth-child(1) {
		background-color: orange;
		color: #fff;
	}

	.group_4 button:nth-child(2) {
		background-color: #ff0101;
		color: #ffffff;
	}

	.group_4 button:nth-child(3) {
		background-color: #darkcyan;
		color: #ffffff;
	}

	.mt-9 {
		margin-top: 15.7rpx;
	}

	.mt-7 {
		margin-top: 12.21rpx;
	}

	.mt-19 {
		margin-top: 33.14rpx;
	}

	.ml-17 {
		margin-left: 29.65rpx;
	}

	.page {
		background-color: #f2f2f2;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.image {
			width: 100vw;
			height: 25.5814vw;
		}

		.group {
			padding: 0 17.44rpx;

			.section {
				padding: 47.09rpx 27.91rpx;
				background-color: #ffffff;
				border-radius: 17.44rpx;

				.image_2 {
					width: 83.72rpx;
					height: 83.72rpx;
				}

				.text {
					color: #333333;
					line-height: 29.11rpx;
					font-weight: bold;
				}

				.text_2 {
					color: #666655;
					font-size: 28rpx;
					word-wrap: break-word;
					width: 70vw;
				}

				.image_3 {
					width: 62.79rpx;
					height: 62.79rpx;
				}
			}

			.section_2 {
				padding: 27.91rpx;
				background-color: #ffffff;
				border-radius: 17.44rpx;

				.image_4 {
					border-radius: 8.72rpx;
					width: 139.53rpx;
					height: 139.53rpx;
				}

				.text_3 {
					color: #575757;
				}

				.text_4 {
					margin-left: 6.98rpx;
					margin-top: 38.37rpx;
					color: #808080;
					line-height: 26.76rpx;
				}

				.text_5 {
					margin-left: 6.98rpx;
					margin-top: 13.95rpx;
					color: #ff0101;
					line-height: 23.83rpx;
				}
			}

			.font_2 {
				font-size: 28rpx;
				font-family: SourceHanSansCN;

				color: #555555;
			}

			.font {
				font-size: 31.4rpx;
				font-family: SourceHanSansCN;
			}

			.section_3 {
				padding: 31.4rpx 27.91rpx 136.05rpx 34.88rpx;
				background-color: #ffffff;
				border-radius: 12.24rpx;

				.text_6 {
					color: #000000;
					line-height: 22.24rpx;
				}

				.text_7 {
					color: #ff0101;
					font-size: 31.4rpx;
					font-family: SourceHanSansCN;
					font-weight: 700;
					line-height: 29.79rpx;
				}

				.group_2 {
					margin-top: 34.88rpx;

					.group_3 {
						padding-left: 6.98rpx;

						.text_8 {
							line-height: 22.66rpx;
						}

						.text_9 {
							color: #ff0101;
							line-height: 18.54rpx;
						}
					}

					.text_10 {
						margin-right: 10.47rpx;
						color: #333333;
						line-height: 42.73rpx;
					}

					.text_12 {
						margin-right: 10.47rpx;
						color: #333333;
						line-height: 42.73rpx;
						white-space: pre-wrap;
						word-wrap: break-word;
						word-break: break-all;
						width: 500rpx;
					}
				}

				.group_4 {
					margin-top: 54.65rpx;
					padding: 0 10.67rpx;

					.text-wrapper {
						padding: 20.93rpx 0;
						background-color: #ffffff;
						border-radius: 33.14rpx;
						width: 211.05rpx;
						height: 68.02rpx;
						border-left: solid 1.74rpx #8a8a8a;
						border-right: solid 1.74rpx #8a8a8a;
						border-top: solid 1.74rpx #8a8a8a;
						border-bottom: solid 1.74rpx #8a8a8a;

						.text_11 {
							color: #383838;
						}
					}

					.text-wrapper_2 {
						padding: 20.93rpx 0;
						background-color: #ff0101;
						border-radius: 33.14rpx;
						width: 209.3rpx;
						height: 66.28rpx;

						.text_12 {
							color: #ffffff;
							line-height: 22.6rpx;
						}
					}
				}
			}
		}
	}
</style>